<template>
  <div class="model-form-config-data-container" id="model-form-config-data-container">
    <common-border-table ref="tableData"
       :table-data="tableData"
       v-loading="loading"
       :table-title="tableTitle"
       :filter-info="filterInfo"
       type="selection"
       row-option-width="200px"
       @selection-change="selectionChange"
       @row-click="rowClick">
      <template #tableToolbar>
        <div class="table-toolbar">
          <div class="fl">
            <el-button type="primary" icon="el-icon-plus" plain size="small" @click="createFormConfig">新建</el-button>
            <el-button type="danger" icon="el-icon-minus" plain size="small" @click="deleteFormConfig">删除</el-button>
            <el-button type="info" icon="el-icon-copy-document" plain size="small" @click="copyFormConfig">拷贝</el-button>
          </div>
        </div>
      </template>

      <template v-for="item in colors" #[item]="scope" >
        <el-color-picker :value="scope.row[item]" :key="item" v-if="scope.row[item]" size="small" show-alpha></el-color-picker>
      </template>

      <template #rowOption="scope">
        <el-button type="text" size="small" @click="editFormConfig(scope.row)">编辑</el-button>
        <el-button type="text" size="small" @click="configFormItem(scope.row)" style="color: green;">配置表单项</el-button>
      </template>
    </common-border-table>

    <model-form-config-form :visible="showCreateForm" @removed="openAndCloseDialog" v-if="showCreateForm"
                            :item-info="editData" :edit="edit" @updateTable="updateTableData"
                            :model-id="id">
    </model-form-config-form>

    <model-form-item-info :visible="openFormItemConfig" @removed="(i) => this.openFormItemConfig = i" v-if="openFormItemConfig"
                          :model-form="modelForm">
    </model-form-item-info>
  </div>
</template>

<script>

import {getModelFormConfigs, deleteFormConfig} from '@/js/api/model/modelFormConfig'
import CommonBorderTable from '@/components/common/CommonBorderTable'
import {tableTitle, filterInfo} from '@/js/model/modelFormConfigTableConfig'
import TableDataMixins from '@/components/mixins/table/TableDataMixins'
import ModelFormConfigForm from '@/components/model/ModelFormConfigForm'
import ModelFormItemInfo from '@/components/model/ModelFormItemInfo'
import TableSelectionsMixins from '@/components/mixins/table/TableSelectionsMixins'

export default {
  name: 'ModelFormConfigTableData',
  props: {
    id: {
      type: [String, Number],
      default: ''
    }
  },
  components: {
    CommonBorderTable,
    ModelFormConfigForm,
    ModelFormItemInfo
  },
  mixins: [TableDataMixins, TableSelectionsMixins],
  data(){
    return {
      edit: false,
      editData: undefined,
      colors: ['cancelBtnBgColor', 'cancelBtnColor', 'saveBtnBgColor', 'saveBtnColor', 'resetBtnBgColor', 'resetBtnColor'],
      openFormItemConfig: false,
      modelForm: undefined
    }
  },
  methods: {
    async getModelFormConfigs(){
      this.loading = true
      const tableData = await getModelFormConfigs(this.id)
      if (tableData.errorMsg){
        this.$tips(tableData.errorMsg, 'error')
      } else {
        this.sourceTableData = tableData.data
        this.tableData = [...this.sourceTableData]
      }
      this.loading = false
    },
    createFormConfig(){
      this.editData = undefined
      this.showCreateForm = true
      this.edit = false
    },
    editFormConfig(data){
      this.showCreateForm = true
      this.edit = true
      this.editData = data
    },
    copyFormConfig(){
      if (this.selections.length != 1) {
        this.$tips('请选择一条要拷贝的数据！', 'error')
        return
      }
      const selection = {...this.selections[0]}
      selection.id = null
      selection.formTitle = selection.formTitle + '_copy'
      selection.code = selection.code + '_copy'
      this.editData = selection
      this.showCreateForm = true
      this.edit = false
    },
    deleteFormConfig(){
      const deleteData = this.selections
      if (deleteData.length <= 0){
        this.$tips('请选择要删除的数据!', 'error')
        return
      }
      const idArr = []
      deleteData.forEach(item => idArr.push(item.id))
      this.$myConfirm('是否确定删除？', async() => {
        const loading = this.$appLoading('数据删除中。。。', '#model-form-config-data-container')
        const response = await deleteFormConfig(idArr)
        if (response.errorMsg){
          this.$tips(response.errorMsg, 'error')
        } else {
          await this.getModelFormConfigs()
        }
        loading.close()
      })
    },
    updateTableData(attr){
      this.getModelFormConfigs()
    },
    configFormItem(data){
      this.openFormItemConfig = true
      this.modelForm = {...data}
    }
  },
  created(){
    this.initData(filterInfo, tableTitle)
    this.getModelFormConfigs()
  }
}
</script>

<style lang="less">
  .model-form-config-data-container{
    height: inherit;
  }
</style>
